<template>
  <el-container id="fileDetails">
    <file-search v-show="searchInput.length > 0"
                 ref="search"
                 class="file-search"
                 :keysForId="keysForId"
                 @collectFile="collectFile"
                 @handleCellClick="CellClick"
                 @shareFile="shareFile"
                 @partnerShare="partnerShare"
                 @outShareFile="outShareFile"
                 @previewFile="previewFile"
                 @fileHistory="fileHistory"
                 @handleDelete="handleDelete"
                 @companyShare="companyShare"
                 @download='downloadFile1'
                 @renameHandle="renameHandle"
                 :searchInput="searchInput"
    ></file-search>
    <el-container v-show="searchInput.length == 0">
        <el-header>
          <div class="header-left">
            <el-button class="go-back" @click="goBack">
                    <i class="el-icon-arrow-left"></i>
                    上一级
                </el-button>
                  <el-breadcrumb separator-class="el-icon-arrow-right" class="tit">
                  <template v-for="(item,index) in fileUrl">
                    <el-breadcrumb-item :key='index'  v-if="fileUrl[0].label=='同事共享'" ><i @click="gotoByPath(keysForId[index])" :class='index==fileUrl.length-1?"current":""'>{{item.label}}</i></el-breadcrumb-item>
                        <el-breadcrumb-item :key='index'  v-else-if="fileUrl[0].label=='公司文档'"><i @click="gotoByPathCom(keysForId[index])" :class='index==fileUrl.length-1?"current":""'>{{item.label}}</i></el-breadcrumb-item>
                        <el-breadcrumb-item :key='index'  v-else-if="fileUrl[0].label=='合作伙伴'" ><i @click="gotoByPathPar(keysForId[index])" :class='index==fileUrl.length-1?"current":""'>{{item.label}}</i></el-breadcrumb-item>
                      <el-breadcrumb-item :key='index' v-else-if="fileUrl[0].label=='我的文档'"
                             >
                        <i :class='index==fileUrl.length-1?"current":""' @click="findTheNode(item)">{{item.label}}</i>
                      </el-breadcrumb-item>
                  </template>
</el-breadcrumb>
          </div>
            <div style="display: flex">
                <el-button-group>
                    <el-button
                            plain
                            @click="listVisibleFun(0)"
                            :class="listVisible ? 'focus' : ''">
                        <i class="fa fa-bars"></i>
                    </el-button>
                    <el-button
                            plain
                            @click="listVisibleFun(1)"
                            :class="!listVisible? 'focus' : ''"
                            icon="el-icon-menu">
                    </el-button>
                </el-button-group>
                <el-button class="refresh" icon="el-icon-refresh" plain @click="$emit('reloadFolders')"></el-button>
            </div>
        </el-header>
        <el-main>
            <div class="toolbar"  v-show="!(workmateDisable||isShow != '我的文档')">
                <el-button @click="handleUpload" v-show="!(workmateDisable||isShow != '我的文档')" class="bt1">
                    <img src="../../assets/icon/up-icon.png" width='12px'> 上传文件
                </el-button>
                <el-button @click="addFile(true)" plain v-show="isShow == '我的文档'">
                    <img src="../../assets/icon/add-icon.png" width="12px"> 新建文件夹
                </el-button>
                <el-button @click="handleShareFile" v-show="!(workmateDisable||isShow != '我的文档')" plain>分享</el-button>
                <el-button  v-show="!(workmateDisable||isShow != '我的文档')" @click="downloadFile(sels[0])" class='btlast' plain>下载
                </el-button>
                <el-dropdown placement='bottom' trigger='click'>
                    <el-button plain >更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  @click.native="handleOutShareFile">外链分享</el-dropdown-item>
                        <el-dropdown-item   @click.native="handleDelete(1)">删除</el-dropdown-item>
                        <el-dropdown-item   @click.native="moveFile">移动文件</el-dropdown-item>
                        <!--<el-dropdown-item @click.native="reloadFolders">刷新</el-dropdown-item>-->
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div v-show="filesTableData.length>0">
                <FilesTable
                        v-show="isFilesTableData && listVisible"
                        :filesTableData="filesTableData"
                        @retweet='retweet'
                        @fileMove='fileMove'
                        :nodeData="nodeData"
                        @getSels="getSels"
                        @shareFile="shareFile"
                        @changeBigdata="changeBigdata"
                        @partnerShare="partnerShare"
                        @outShareFile="outShareFile"
                        @previewFile="previewFile"
                        @fileHistory="fileHistory"
                        @handleDelete="handleDelete"
                        @companyShare="companyShare"
                        @download='downloadFile'
                        @renameHandle="renameHandle"
                        @changeFilesTableData="changeFilesTableData"
                        ref="mychild"
                ></FilesTable>
                <BigIconShow
                        ref="bigiconshow"
                        v-show="isFilesTableData && !listVisible"
                        :bigIconShowData="filesTableData"
                        :workmateDisable="workmateDisable"
                        :nodeData="nodeData"
                        @stopDownload='stopDownload'
                        @handleCellClick="handleCellClick"
                        @outShareFile="outShareFile"
                        @partnerShare="partnerShare"
                        @handleDelete="handleDelete"
                        @downloadFile="downloadFile1"
                        @companyShare="companyShare"
                        @shareFile="shareFile"
                        @retweet="retweet"
                        @renameHandle="renameHandle"
                        @fileHistory="fileHistory"
                        @collectFile="collectFile"
                        @fileMove='fileMove'
                        @getSels = "getSels"
                ></BigIconShow>
                <AddFile @addNode="addNode"
                         :nodeData="nodeData"
                         v-if="addFileBox.isAddFileVisible"
                         :addFileBox="addFileBox"></AddFile>
            </div>
            <div v-show="filesTableData.length<=0" style="height:100%;width:100%;display: flex;margin-top:15%;align-items: center;flex-direction: column">
                <img src="../../assets/img/file/no1.png" alt="">
                <el-row style="font-size:18px;color:#B4B4B4;margin-top:9px;">暂无内容</el-row>
                <el-row style="font-size:14px;color:#B4B4B4;margin-top:10px;">请联系管理员或去其他地方看看吧</el-row>
            </div>
        </el-main>
    </el-container>
    <out-share-page
          :outShareVisible='outShareVisible'
          :outShareTitle='outShareTitle'
          :outShareFiles='outShareFiles'
          @outShareVisibleBox="outShareVisibleBox"
          v-if="outShareVisible">
    </out-share-page>
    <Del v-if="deleteVisible"
         :deleteBox="{isVisible: deleteVisible, delData: sels, dirId: addFileBox.dirId, nodeData: nodeData }"
         @cancleDel="deleteVisible = false"
         @clearSelsForDel="clearSelsForDel"></Del>
    <share-page
                :shareTitle="shareTitle"
                :sharePara="sharePara"
                :companyList='company'
                @noclickshare = "clickShare = false"
                ref="share"
                v-if="company  && clickShare"
    ></share-page>
    <partner-share
            :shareTitle="shareTitle"
            :sharePara="sharePara"
            :companyList='partner'
            ref="partnerShare"
            v-if="partner"
    ></partner-share>
    <UploadFile
      ref="uploadComponents"
      :currFileId='currFileId'
      :nodeData="nodeData"
      @clearSelsForDel="clearSelsForDel"></UploadFile>
    <file-history
            @previewFile="previewFile"
            @downloadFile="downloadFile"
            ref="history">
    </file-history>
    <rename-file ref="rename"
                 @reloadData="reloadData">
    </rename-file>
    <!-- 转存 -->
    <Retweet :retweetVisibleFun="retweetVisibleFun" v-if="isRetweet"
               @retweetVisibleBox="retweetVisibleBox"
               :retweetPara="retweetPara">
    </Retweet>
    <!--文件移动组件-->
    <FileMove :moveVisibleFun="moveVisibleFun" v-if="isFileMove"
               @moveVisibleBox="moveVisibleBox"
               :movePara="movePara"
               @clearSelsForDel="clearSelsForDel"
               :nodeData="nodeData">
    </FileMove>
  </el-container>
</template>
<script>
  import axios from "axios";
  import {mapState, mapMutations} from "vuex";
  import FilesTable from '../file_details/FilesTable'
  import AddFile from '../file_details/AddFile'
  import Del from '../file_details/Del'
  import OutSharePage from "../file_details/OutSharePage";
  import BigIconShow from "../file_details/BigIconShow";
  import SharePage from "../file_details/sharePage";
  import FileHistory from "./FileHistory";
  import UploadFile from './UpLoadFile';
  import RenameFile from "./RenameFile";
  import FileSearch from "./FileSearch";
  import PartnerShare from "./partnerShare";
  import Retweet from "./Retweet.vue";
  import FileMove from "./FileMove";

  export default {
    inject: ["reloadHome",'setExpandedKeys'],
    props: ['fileDetails', 'currFileId', 'nodeInfo', 'currNode', 'fileUrl','keysForId','tempDirId', 'resolveCallBack'],
    components: {
      FileMove,
      Retweet,
      PartnerShare,
      FileSearch,
      RenameFile, FileHistory, SharePage, BigIconShow, OutSharePage, FilesTable, AddFile, Del, UploadFile},
    provide() {
      return {
        reloadFilesTableData: this.reloadFilesTableData
      }
    },
    data() {
      return {
        clickShare:false,
        addFileBox: {
          isAddFileVisible: false,
          dirId: ''
        },
        sharePara: '',
        shareTitle:"",
        state1: [],
        sharename: "文件",
        shareType:"文件",
        shareBarShow:true,
        company:[],
        listVisible: true,
        deleteVisible: false,
        workmateDisable: false,
        dowloadFlag: true,
        filesTableData: [],
        isFilesTableData: true,
        sels: [],
        outShareVisible: false,
        outShareTitle: '分享',
        outShareFiles: [],
        nodeData: '',
        showSearch:false,
        isShow:sessionStorage.getItem("currentBox"),
        isRetweet: false,
        retweetPara: '',
        retweetVisibleFun : false,
        isFileMove:false,
        movePara:[],
        moveVisibleFun:false,
        percentComplete:0,
        partner:[],
        nodeData:''
      };
    },
    created() {
      console.log(this.fileUrl)
      this.getCompanys()
      this.fileDetails.forEach(val=>{
        val.isloading=false;
      })
      this.filesTableData = this.fileDetails;
      // 获取当前文件夹ID
      this.addFileBox.dirId = this.currFileId
      this.nodeData = {
        currNode: this.currNode,
        nodeInfo: this.nodeInfo,
        resolveCallBack: this.resolveCallBack,
      }
    },
    mounted() {
      console.log('==fileDetails nodeData==', this.nodeData);
      let data = JSON.stringify(sessionStorage.getItem("listVisible"));
      if(data == "null"){
        this.listVisible = true;
      }else{
        if(data.indexOf("true") != -1){
          this.listVisible = true;
        }else{
          this.listVisible = false;
        }
      }
      console.log(this.listVisible);
    },
    watch: {
      searchInput:{
        handler: function (newVal, oldVal) {
          if(newVal != oldVal){
            if(newVal.length == 0){
              if(sessionStorage.getItem("currentBox") == "我的文档"){
                this.$emit('refreshTreeData', this.nodeData)
              }
              this.$refs.search.currentRow = 10;
              this.$refs.search.currentPage = 1;
            }
            console.log("this is searchInput new data ", newVal);
            console.log(sessionStorage.getItem("currentBox"));
            this.$refs.search.searchLoading = true;
            if(sessionStorage.getItem("currentBox") == "我的文档"){
              console.log(this.$refs) ;
              this.$refs.search.showdata = "我的文档";
              this.$refs.search.tempDirId = this.tempDirId;
              if(this.fileUrl.length == 1){
                 console.log("isglobal")
                 this.$refs.search.isglobal = true;
              }else{
                console.log("noglobal")
                 this.$refs.search.isglobal = false;
              }
               this.$refs.search.searchBigData(newVal);
            }else if(sessionStorage.getItem("currentBox") == "同事共享"){
              this.$refs.search.showdata = "同事共享";
              if(this.fileUrl.length == 1){
                this.$refs.search.isglobal = true;
              }else{
                this.$refs.search.isglobal = false;
              }
              this.$refs.search.searchMateData(newVal);
            }else if(sessionStorage.getItem("currentBox") == "公司文档"){
              this.$refs.search.showdata = "公司文档";
              if(this.fileUrl.length == 1){
                this.$refs.search.isglobal = true;
              }else{
                this.$refs.search.isglobal = false;
              }
              this.$refs.search.searchCompanyFile(newVal);
            }
          }
        }
      },
      filesTableData:{
        handler:function (newV, oldV) {
          console.log("change",newV)
          if (newV !== oldV) {
            this.filesTableData = newV
            return this.filesTableData
          } else {
            return this.filesTableData
          }
        },
        deep:true
      },
      sels:{
        handler: function (newVal, oldVal) {
          console.log("this is new data ",newVal);
          if(newVal.length == 1){
            this.flag = true;
            if(newVal[0].fileType == 1){
              this.dowloadFlag = true;
              console.log("wenjianjia")
            }else{
              this.dowloadFlag = false;
            }
          }else{
            this.flag = false;
            this.dowloadFlag = true;
          }
        }
      },
      deleteBox: function (newV, oldV) {
        if (newV !== oldV) {
          this.deleteVisible = false
          this.$nextTick(function () {
            this.deleteVisible = true
          })
        }
      }
    },
    computed: {
      ...mapState(['searchInput']),
      disabledFun: function () {
        if (this.sels == false) {
          return true;
        } else {
          return false;
        }
      },
      option: function() {
        this.state1 = [];
        if (this.shareRange === "user") {
          return this.shareUserList;
        } else {
          return this.shareGroupList;
        }
      },
    },
    methods: {
      changeBigdata(data){
        this.filesTableData = data
      },
      moveFile(){
        if(this.isFilesTableData && !this.listVisible){
          this.$refs.mychild.fileMove(this.sels);
        }else{
          this.$refs.mychild.fileMove();
        }

      },
      reloadData(data){
        console.log(data);
        console.log(this.searchInput)
        if(this.searchInput.length > 0){
          if(sessionStorage.getItem("currentBox") == "我的文档"){
            console.log(this.$refs) ;
            this.$refs.search.showdata = "我的文档";
            this.$refs.search.tempDirId = this.tempDirId;
            if(this.fileUrl.length == 1){
              console.log("isglobal")
              this.$refs.search.isglobal = true;
            }else{
              console.log("noglobal")
              this.$refs.search.isglobal = false;
            }
            this.$refs.search.searchBigData(this.searchInput);
          }
        }
        this.$refs.mychild.reloadData(data);
      },
      changeFilesTableData(data,row){
        for(let i in data){
          if(data[i].id == row.id){
            console.log("aaaaaaaaa");
            this.$set(this.filesTableData[i],"isFavorites",row.isFavorites);
            break;
          }
        }
      },
      retweetVisibleBox(bool) {
      return this.retweetVisibleFun = bool
      },
      moveVisibleBox(bool){
        return this.moveVisibleFun=bool;
      },
      retweet(para) {
          this.isRetweet = false
          this.$nextTick(function () {
              this.isRetweet = true
              this.retweetPara = para
              this.retweetVisibleFun = true;
          })
      },
      fileMove(para){
        console.log("filedetails-filemove")
        this.isFileMove=false;
        this.$nextTick(function () {
              this.isFileMove = true
              this.movePara = para
              this.moveVisibleFun = true;
          })
      },
      findTheNode(item) {
        this.$emit('loadedTheNode', item.nodeResolve)
      },
      goBack() {
        console.log('goBack:', this.fileDetails);
        this.$emit('handleParentNode', this.fileDetails.$nodeAndresolve)
      },
      previewFile(item){
        this.$refs.bigiconshow.previewFile(item);
      },
      // getCompany(){
      //   this.$http.get('/company/getCompanyList').then(res=>{
      //     let {data}=res;
      //     this.company=[];
      //     if(res.status==200){
      //       data.forEach(val=>{
      //         this.company.push({
      //           id: val.id,
      //           name: val.name,
      //           createTime: val.createTime,
      //         })
      //       })
      //     }
      //   })
      // },
      getCompanys(){
        this.$http.get('/company/getPartner').then(res=>{
            this.partner=[];
            console.log(res);
            if(res.status==200){
                let {data}=res;
                if(data!=false){
                    data.forEach(val=>{
                      if(val.status == "1"){
                        this.partner.push(val)
                      }
                    })
                }
            }
        }).catch((error)=>{
            this.$message.error('网络错误，服务器无响应')
        })
    },
      checkedSearch(row){
        this.$refs.mychild.checkedSearch(row);
      },
      shareFile(file) {
        this.sels = [];
        this.$refs.mychild.clearSelection();
        this.sels.push(file);
        console.log(this.sels.length);
        this.shareRange = "user";
        this.handleShareFile();
      },
      partnerShare(file){
        this.sels = [];
        this.$refs.mychild.clearSelection();
        this.sels.push(file);
        console.log(this.sels.length);
        this.shareRange = "user";
        this.handleShareFile("partner");
      },
      companyShare(file){
        console.log("公司分享文件",file);
        this.$confirm("确认分享"+file.fileName+"到公司吗？","提示",{}).then(()=>{
          this.$http.post("/companyFile/saveCompanyFile",{
            fileId:file.id
          }).then(res=>{
            if(res.status == 200){
              this.$message({
                message:res.msg,
                type:"success",
              })
            }else{
              this.$message.error(res.msg)
            }
          })
        })
      },
      collectFile(item){
        this.$refs.mychild.collectFile(item);
      },
      fileHistory(item){
        this.$refs.history.fileHistory(item);
      },
      renameHandle(item){
        this.$refs.rename.renameHandle(item);
      },
      CellClick(item){
        this.$emit("CellClick",item)
      },
      handleCellClick(item){
        this.$refs.mychild.handleCellClick(item);
      },
      gotoByPath(id){
        console.log(this.fileUrl);
        console.log(this.keysForId)
      //  this.setExpandedKeys({id:id})
       this.$emit('goto',id)
      },
      gotoByPathCom(id){
        this.$emit('gotoByPathCom',id)
      },
      gotoByPathPar(id){
        this.$emit('gotoByPathPar',id)
      },
      addNode(node) {
        console.log('appendChildNode', node)
        this.$emit('appendChildNode', node)
      },
      getSels(data){
        this.sels = data;
        console.log(this.sels)
      },
      reloadFolders() {
        this.$emit("reloadFolders")
      },
      handleDelete(item) {
        if(item != 1){
          this.$refs.mychild.$refs.filetable.clearSelection();
          this.sels=[];
          this.sels.push(item);
        }
        if(this.sels.length <= 0){
          this.$message.error("请先选择至少一个文件");
          return;
        }
        if (!(this.sels == false)) {
          this.deleteVisible = true;
        }
      },
      clearSelsForDel(nodeData) {
        console.log(nodeData)
        this.deleteVisible = false
        this.sels = []
        this.nodeData = nodeData;
        console.log(this.searchInput)
        if(this.searchInput.length > 0){
            if(sessionStorage.getItem("currentBox") == "我的文档"){
              console.log(this.$refs) ;
              this.$refs.search.showdata = "我的文档";
              this.$refs.search.tempDirId = this.tempDirId;
              if(this.fileUrl.length == 1){
                console.log("isglobal")
                this.$refs.search.isglobal = true;
              }else{
                console.log("noglobal")
                this.$refs.search.isglobal = false;
              }
              this.$refs.search.searchBigData(this.searchInput);
            }
        }else{
          this.$emit('refreshTreeData',nodeData)
        }
      },
      addFile(isVisible) {
        console.log("fileUrl",this.fileUrl);
        console.log("keysForId",this.keysForId);
        this.addFileBox.isAddFileVisible = !isVisible
        this.$nextTick(function () {
          this.addFileBox.isAddFileVisible = isVisible
        })
        return this.addFileBox
      },
      handleShareFile(partner) {
        this.clickShare = true;
        setTimeout(()=> {
          this.state1 = [];
          console.log(this.sels);
          if (this.sels.length == 1) {
            this.sharename = this.sels[0].fileName;
            if(this.sels[0].fileType==0){
              this.shareType="文件"
            }else{
              this.shareType="文件夹"
            }
            this.shareTitle="共享"+this.shareType+"："+this.sharename
            this.shareBarShow=true;
            console.log(this.$refs.share.shareVisibleFun);
            if(partner  == "partner"){
              this.$refs.partnerShare.shareVisibleFun = true;
            }else{
              this.$refs.share.shareVisibleFun = true;
            }
            this.sharePara = this.sels
          } else {
            this.$message.error("能且只能选一个文件对象");
          }
        })

      },
      downloadFile1(file){
        // this.sels = [];
        // this.sels[0] = file;
        // this.downloadFile(file);
        this.$refs.mychild.downloadFile(file);
      },
      downloadFile(file) {
        if(!this.dowloadFlag){
          this.$refs.mychild.downloadFile(file);
        }else{
          this.$message.error("只支持单文件下载")
        }
      },
      stopDownload(){
        this.$refs.mychild.stopDownload();
      },
      outShareFile(file) {
        console.log(file);
        this.sels = [];
        this.sels.push(file);
        this.handleOutShareFile();
      },
      handleOutShareFile() {
        // if(disabledFun)
        if(this.sels.length <= 0){
          this.$message.error("请先选择至少一个文件");
          return;
        }
        this.outShareFiles=[];
        this.outShareTitle="分享："
        console.log(this.sels);
        if (this.sels.length == 1) {
          this.outShareTitle += this.sels[0].fileName;
        } else {
          this.outShareTitle += (this.sels[0].fileName + "等");
        }
        this.sels.forEach(v => {
          this.outShareFiles.push(v.id);
        })
        this.outShareVisible = true;
      },
      outShareVisibleBox(bool) {
        this.sels = [];
        if(this.$refs.mychild != undefined){
          this.$refs.mychild.clearSelection();
        }
        this.outShareVisible = bool;
      },
      // 开始上传
    handleUpload() {
      console.log("fileUrl",this.fileUrl);
      console.log("keysForId",this.keysForId);
      this.$refs.uploadComponents.uploadVisible=true;
    },
      listVisibleFun(e) {
        // this.$emit('reloadFolders');
        if (e === 0) {
          sessionStorage.setItem("listVisible",true);
          this.listVisible = true;
        } else {
          sessionStorage.setItem("listVisible",false);
          this.listVisible = false;
        }
      },
      reloadFilesTableData() {
        this.isFilesTableData = false;
        this.$nextTick(function () {
          this.isFilesTableData = true
        })
      }
    }
  };
</script>
<style scoped lang="scss">
  @import "scss_vars";

  #fileDetails {
    position: relative;
    .el-header, .el-main {
      padding: 0;
    }
      .file-search{
          width: 100%;
      }
      .refresh{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 42px;
          height: 36px;
      }
      .el-button-group{
          margin-right: 10px;
          .el-button{
              padding:10px;
              width: 42px!important;
          }
          .focus{
              background: #549de8;
              border-color: #409EFF;
              color: #fff;
          }
      }
    .el-header {
      padding: 0 20px;
      height: 54px !important;
      /*line-height: 30px;*/
      background: $main-bg;
      border-bottom: 1px solid $black-bg;
      display: flex;
      justify-content: space-between;
      align-items: center;

     .header-left{
       align-items: center;
       display:flex;
         .go-back {
             height: 36px;
             padding: 10px;
         }
       .tit {
          line-height: 54px;
          padding-left:20px;
          margin-left: 20px;
          border-left:1px solid #eee;
        i:hover{
           text-decoration: underline;
           cursor: pointer;
         }
        .current{
          color:#2b2b2b;
          font-weight: 900;
        }
      }
     }
      .cutover-list {
        display: inline-block;
        float: right;
        width: 30px;
        text-align: center;
        font-size: 16px;
        color: $black-light;
        cursor: pointer;
        border: 1px solid $black-bg;
        background: white;
        border-radius: 3px;
      }

      .refresh:hover {
        background: $aside-bg;
        color: white;
      }

      .activeList {
        color: white;
        background: $aside-bg;
      }
    }
    .el-main {
      .toolbar {
        padding: 9px 0 9px 20px;
        height: 36px;
        border-bottom: 1px solid $black-bg;
        margin: 0;
        img {
          width: 12px;
          padding-right: 2px;
        }
      }
      .el-button {
        height: 36px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
      .bt1 {
        background: rgba(84, 157, 232, 1);
        color: #fff;
      }
      .bt1:focus {
        background: rgba(84, 157, 232, 0.8);
      }
      .bt1:hover {
        background: rgba(84, 157, 232, 0.8);
      }
      .btlast {
        margin-right: 10px;
      }
    }
  }
    .is-disabled{
      pointer-events:auto!important;
    }
    .is-disabled:hover{
      cursor:not-allowed!important;
    }
</style>
<style lang="scss">

</style>
